<template>
	<!-- 查询车票页 -->
	<view class="ticket_list">
		<!-- 日期切换 -->
		<view class="bar">
			<view class="date_item" @click="selectDate('bar', item)" :class="{ 'date_item--active': item == currentDate }" v-for="(item, index) in dates" :key="item">
				<view class="top">{{ item | formatDateSlash }}</view>
				<view class="bottom" v-if="index < 3">{{ index | dateFormat }}</view>
				<view class="bottom" v-else>{{ item | formatDayOfTheWeek }}</view>
			</view>
			<view class="date_picker" @click="selectDate('open')">
				<view class="date_picker_icon1"><image src="../../static/images/icon_rili.png"></image></view>
				<view class="date_picker_icon2"><uni-icons class="arrowdown" type="arrowdown" size="20" color="#333333"></uni-icons></view>
			</view>
		</view>
		<!-- 订单列表 -->
		<view class="content">
			<scroll-view
				class="list"
				scroll-y="true"
				:refresher-triggered="refresherTriggered"
				refresher-enabled="true"
				scroll-with-animation="true"
				enable-back-to-top="true"
				@refresherrefresh="refreshList"
				show-scrollbar="true"
				refresher-threshold="100"
			>
				<view v-if="ticketList.length">
					<view class="list-item" v-for="item in ticketList" :key="item.schId" :data-item="item" @click="goTicketDetail">
						<view class="item-left">
							<view class="time">{{ (currentDate + ' ' + item.departTime) | formatDateTime }}</view>
						</view>
						<view class="landmark">
							<view class="landmark-top"><image class="landmark-top-icon" src="../../static/images/icon_dw.png"></image></view>
							<view class="landmark-middle"><view class="line"></view></view>
							<view class="landmark-bottom"><uni-icons class="landmark-bottom-icon" type="smallcircle" size="12" color="#798498"></uni-icons></view>
						</view>
						<view class="item-middle">
							<view class="start omitted">{{ item.departStation.stationName }}</view>
							<view class="end omitted">{{ item.destStation.stationName }}</view>
						</view>
						<view class="item-right">
							<view class="price">
								￥
								<text>{{ item.ticketPrices | formatPrice }}</text>
							</view>
							<view class="poll">
								余票
								<text>{{ item.seatLeft }}</text>
								张
							</view>
						</view>
					</view>
				</view>
				<view v-else class="loading">
					<my-loading @refresh="refreshList" :loading-type="loadingType" :loading-text="loadingText" :refresh-btn="refreshBtn"></my-loading>
				</view>
			</scroll-view>
		</view>
		<!-- uni-app 日历 -->
		<uni-calendar ref="calendar" :insert="false" :lunar="true" :start-date="startDate" :end-date="endDate" @confirm="confirm"></uni-calendar>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
// components
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue';
import uniCalendar from '@dcloudio/uni-ui/lib/uni-calendar/uni-calendar.vue';
import myLoading from '@/components/myLoading/myLoading.vue';
// api
import { $saleSchedules } from '../../service/index';
// untils
import { myShowToast, myShowModal } from '../../utils/utils.js';
export default {
	components: { uniIcons, uniCalendar, myLoading },
	data() {
		return {
			dates: [], // 近6天日期
			currentDate: this.$dayjs().format('YYYY-MM-DD'), // 当前日期
			startDate: this.$dayjs().format('YYYY-MM-DD'), // 日历开始日期
			endDate: this.$dayjs()
				.add(3, 'month')
				.format('YYYY-MM-DD'), // 日历结束日期
			refresherTriggered: false, // 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
			ticketList: [], // 车票列表
			loadingType: 'no_trips', // loading类型
			loadingText: '', // 提示文案
			getListLoading: false, // 是否请求中
			refreshBtn: false // 是否显示刷新重试按钮
		};
	},
	computed: mapState(['info', 'stationStart', 'stationEnd']),
	//定义过滤器
	filters: {
		dateFormat(value) {
			// 日期显示
			const datesTexts = ['今天', '明天', '后天'];
			return datesTexts[value] || '';
		},
		formatPrice(arr) {
			const peiceItem = arr.find(item => {
				return item.type === 'FULL';
			});
			console.log(peiceItem);
			return peiceItem.price;
		}
	},
	methods: {
		...mapMutations(['cancelRequest', 'updateTicketDetail']),
		// 下拉刷新
		refreshList(type) {
			this.refresherTriggered = true;
			this.getSaleSchedules();
		},
		// 去订单详情
		goTicketDetail(e) {
			if (!this.info.token) {
				uni.showModal({
					title: '提示',
					content: '您尚未登录,请先登录',
					showCancel: false,
					success: res => {
						if (res.confirm) {
							uni.switchTab({
								url: '/pages/center/center'
							});
						}
					}
				});
				return;
			}
			const item = e.currentTarget.dataset.item;
			this.updateTicketDetail(item);
			uni.navigateTo({
				url: `../buyTicket/buyTicket?date=${this.currentDate}&mechNo=${this.stationStart.merchantNo}`
			});
		},
		// 获取头部日期
		getDates(num) {
			const dates = [];
			for (let i = 0; i < num; i++) {
				dates.push(
					this.$dayjs()
						.add(i, 'day')
						.format('YYYY-MM-DD')
				);
			}
			return dates || [];
		},
		// 选择日期
		selectDate(type, item) {
			switch (type) {
				case 'bar':
					this.currentDate = item;
					this.getSaleSchedules();
					break;
				case 'open':
					this.$refs.calendar.open();
					break;
				default:
					break;
			}
		},
		// 确认选择日期
		confirm(e) {
			this.currentDate = e.fulldate;
			this.getSaleSchedules();
		},
		// 获取车次列表
		getSaleSchedules() {
			if (this.getListLoading) {
				return;
			}
			this.getListLoading = true;
			$saleSchedules({
				date: this.currentDate,
				destName: this.stationEnd.stationName,
				mechNo: this.stationStart.merchantNo
			})
				.then(res => {
					this.refresherTriggered = false;
					this.getListLoading = false;
					const data = res.data;
					if (!data.success) {
						myShowModal(data.message || '网络错误');
						this.loadingText = '未查询到车次信息';
						this.refreshBtn = true;
						return;
					}
					// 未查询到车站、票信息
					if (!data.content || !data.content.length) {
						this.loadingText = '未查询到车次信息';
						this.refreshBtn = true;
						this.ticketList = [];
					} else {
						this.ticketList = data.content;
					}
				})
				.catch(err => {
					this.refresherTriggered = false;
					this.getListLoading = false;
					this.loadingType = 'no_network';
					this.loadingText = '哎呀，网络出错了';
					console.log('$saleSchedules--err:', err);
				});
		}
	},
	onLoad(options) {
		const date = options.date || this.$dayjs().format('YYYY-MM-DD');
		this.dates = this.getDates(6); // 头部日期
		this.currentDate = date;
	},
	onShow(){
		this.getSaleSchedules();
	},
	onReady() {
		uni.setNavigationBarTitle({
			// 设置页面标题
			title: this.stationStart.stationName + '-' + this.stationEnd.stationName
		});
	}
};
</script>

<style lang="scss" scoped>
.ticket_list {
	background-color: #f4f6f9;
	.bar {
		position: fixed;
		top: 0;
		width: 718rpx;
		z-index: 99;
		height: 100rpx;
		background-color: #ffffff;
		display: flex;
		overflow-x: scroll;
		justify-content: space-around;
		padding-left: 32rpx;
		.date_item {
			width: 90rpx;
			text-align: center;
			.top {
				font-size: 20rpx;
				font-weight: 500;
				color: #666666;
				padding-top: 20rpx;
			}
			.bottom {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				padding-bottom: 20rpx;
			}
		}
		.date_item--active {
			background: linear-gradient(90deg, rgba(34, 100, 255, 1) 0%, rgba(52, 113, 255, 1) 99%);
			border-radius: 10rpx 10rpx 0rpx 0rpx;
			.top,
			.bottom {
				color: #ffffff;
			}
		}
		.date_picker {
			width: 93rpx;
			box-shadow: -10rpx 0rpx 10rpx rgba(209, 215, 225, 0.6);
			padding-top: 20rpx;
			.date_picker_icon1 {
				margin: 0 auto;
				height: 36rpx;
				width: 36rpx;
				padding: 1rpx;
				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
			.date_picker_icon2 {
				margin: 0 auto;
				height: 38rpx;
				width: 38rpx;
				/deep/ .uni-icons {
					font-size: 38rpx !important;
				}
			}
		}
	}
	.content {
		margin-top: 100rpx;
		.list {
			width: 710rpx;
			height: 100vh;
			padding: 0 20rpx;
			.list-item {
				margin: 20rpx 0;
				background: #ffffff;
				padding: 0 19rpx 0 30rpx;
				height: 180rpx;
				box-shadow: 0px 4px 8px 0px rgba(230, 235, 244, 0.8);
				border-radius: 8rpx;
				display: flex;
				justify-content: space-between;
				.item-left {
					.time {
						font-size: 36rpx;
						font-weight: 800;
						color: rgba(51, 51, 51, 1);
						line-height: 180rpx;
					}
				}
				.item-middle {
					padding: 43rpx 0 44rpx;
					.start,
					.end {
						font-size: 28rpx;
						font-weight: bold;
						color: rgba(51, 51, 51, 1);
						width: 300rpx;
					}
					.start {
						// padding: 43rpx 0 39rpx 0;
						padding-bottom: 39rpx;
					}
					.end {
						// padding-bottom: 44rpx;
					}
				}
				.item-right {
					text-align: right;
					padding: 43rpx 0 44rpx;
					.price {
						font-size: 24rpx;
						font-weight: 500;
						color: rgba(255, 118, 7, 1);
						// padding: 39rpx 0 40rpx 0;
						padding-bottom: 39rpx;
						text {
							font-size: 32rpx;
						}
					}
					.poll {
						font-size: 24rpx;
						font-weight: 500;
						color: rgba(130, 141, 162, 1);
						// padding-bottom: 44rpx;
						text {
							color: #1966ff;
						}
					}
				}
				.landmark {
					padding: 40rpx 0 44rpx 0;
					// width: 38rpx;
					.landmark-top {
						width: 36rpx;
						margin: 0 auto;
						.landmark-top-icon {
							width: 36rpx;
							height: 36rpx;
						}
					}
					.landmark-middle {
						width: 0;
						height: 42rpx;
						border-right: 4rpx dotted rgba(130, 141, 162, 1);
						margin: -6rpx auto 0;
						transform: scale(0.5, 1);
					}
					.landmark-bottom {
						text-align: center;
						margin-top: -16rpx;
					}
				}
			}
		}
	}
}
</style>
